<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    width="60%"
    :append-to-body="true"
    :close-on-click-modal="false"
    center
  >
    <template slot="title">
      <span class="add-main-tital">
        <h4>新增挂架</h4>
      </span>
    </template>
    <div class="add-container">
      <div class="add-main">
        <div class="search-group">
          <div class="search-gropu-item">
            <label>挂架名称</label>
            <el-input v-model="listQuery.mingcheng"></el-input>
          </div>
          <div class="search-gropu-item">
            <label>型别</label>
            <el-input v-model="listQuery.xingbie"></el-input>
          </div>
          <div class="search-gropu-item">
            <label>出厂号码</label>
            <el-input v-model="listQuery.chuchanghm"></el-input>
          </div>
          <div class="search-gropu-item">
            <label>唯一编码</label>
            <el-input v-model="listQuery.weiyibm"></el-input>
          </div>
          <div class="search-gropu-item">
            <label>唯一编码</label>
            <el-input v-model="listQuery.weiyibm"></el-input>
          </div>
          <!-- <div class="search-gropu-item">
            <label>挂架类型</label>
            <el-select v-model="listQuery.huojiaxz" placeholder="请选择">
              <el-option
                v-for="(item, index) in $util.gethuojiaxz()"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div> -->
          <div class="search-button">
            <el-button type="primary" icon="el-icon-search" @click="search">
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetlist">
              重置
            </el-button>
          </div>
        </div>

        <div class="table-list">
          <u-table
            border
            show-overflow
            ref="plxTable"
            keep-source
            :height="tabheight"
            :highlightCurrentRow="false"
            widthResize
            @selection-change="selectChange"
          >
            <u-table-column
              type="index"
              label="序号"
              width="50"
            ></u-table-column>
            <!-- <u-table-column prop="wuzibm" label="物资代码"></u-table-column> -->

            <u-table-column prop="waiguamc" label="挂架名称"></u-table-column>
            <u-table-column prop="leixing" label="型别">
              <template v-slot="scope">
                {{ $util.gethuojiaxz(scope.row.huojiaxz) }}
              </template>
            </u-table-column>
            <u-table-column prop="huoweibh" label="货位编号"></u-table-column>
            <u-table-column prop="xianchuwz" label="现处位置">
              <template v-slot="scope">
                {{ $util.getguajiawz(scope.row.xianchuwz) }}
              </template>
            </u-table-column>
            <!-- <u-table-column prop="guajiazt" label="挂架状态">
              <template v-slot="scope">
                {{ $util.getguajiazt(scope.row.guajiazt) }}
              </template>
            </u-table-column>
            <u-table-column prop="caozuozt" label="挂架操作状态">
              <template v-slot="scope">
                {{ $util.getguajiaczzt(scope.row.caozuozt) }}
              </template>
            </u-table-column> -->
            <u-table-column label="操作">
              <template v-slot="scope">
                <el-button
                  type="text"
                  :disabled="
                    scope.row.guajiazt == 2 && scope.row.caozuozt == 2
                      ? false
                      : true
                  "
                  @click="showHuoweiSelect(scope.row)"
                >
                  创建任务单
                </el-button>
              </template>
            </u-table-column>
          </u-table>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <!-- <el-button
        size="medium"
        type="primary"
        icon="el-icon-s-check"
        @click="save"
      >
        确定
      </el-button> -->
      <el-button size="medium" icon="el-icon-delete" @click="close">
        取 消
      </el-button>
    </span>
    <el-dialog
      title="起始点货位"
      :visible.sync="dialogFormVisibleIN"
      width="30%"
      :append-to-body="true"
      :close-on-click-modal="false"
      height="200px"
      center
    >
      <el-form :model="form">
        <el-form-item label="起点货位" :label-width="80">
          <el-select
            v-model="form.qidianhwh"
            @change="getHuowei($event, 1)"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in huoweilist"
              :key="index"
              :label="item.huoweibh"
              :value="item.huoweibh"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终点货位" :label-width="80">
          <el-select
            v-model="form.zhongdianhwh"
            @change="getHuowei($event, 2)"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in huoweilist"
              :key="index"
              :label="item.huoweibh"
              :value="item.huoweibh"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleIN = false">取 消</el-button>
        <el-button type="primary" @click="insertrwd">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
  import { queryguajiaList, addDBDRW, updateguajia } from '@/api/kunei'
  import { queryHuoWeiList } from '@/api/cangkujichu'
  let _listQuery = {
    pageIndex: 1,
    pageSize: 10,
    guajiazt: 2,
    caozuozt: 2,
  }
  export default {
    name: 'page1AddWuzi',
    props: {
      dataBH: {
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        listQuery: Object.assign({}, _listQuery),
        show: true,
        listLoading: true,
        layout: 'sizes,prev, pager, next',
        total: 0,
        elementLoadingText: '正在加载...',
        selectRows: '',
        ruleForm: {},
        tabheight: 500,
        importShow: false,
        dialogFormVisible: false,
        dialogFormVisibleIN: false,
        wuzizyid: '',
        huoweilist: [],
        form: {},
        selectGj: {},
      }
    },
    created() {},
    mounted() {
      let height = document.getElementById('table-list').offsetHeight
      this.tabheight = height - 300
      this.getData()
      this.gethuoweiList()
    },
    methods: {
      getHuowei(e, type) {
        let item = this.huoweilist.find((item) => {
          return item.huoweibh == e
        })
        type == 1
          ? (this.form.qidianhwid = item.id)
          : (this.form.zhongdianhwid = item.id)
      },
      async gethuoweiList() {
        const res2 = await queryHuoWeiList()
        this.huoweilist = res2.data
      },
      selectable(row, index) {
        if (row.guajiazt == 2 || row.guajiazt == 6) {
          return false
        } else {
          return true
        }
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      async getData() {
        const wzData = await queryguajiaList(this.listQuery)
        this.ruleForm = Object.assign([], wzData.data)
        this.listLoading = false
      },
      showEdit(row) {
        this.dialogFormVisible = true

        this.$nextTick(() => {
          this.$refs.plxTable.reloadData(this.ruleForm)
        })
      },
      close() {
        this.dialogFormVisible = false
        // this.resetlist()
        this.$refs.plxTable.reloadData([])
      },
      showHuoweiSelect(row) {
        this.dialogFormVisibleIN = true
        this.form = Object.assign(this.form, {
          diaobodh: this.dataBH.diaobodh,
          // qidianhwid: row.huoweiid,
          // qidianhwh: row.huoweibh,
          zhuangtai: 1,
        })
        this.selectGj = row
      },
      async insertrwd() {
        // const res = await addDBDRW(this.form)
        let that = this
        let p1 = new Promise((resolve, reject) => {
          updateguajia(
            Object.assign(this.selectGj, {
              caozuozt: 3,
            })
          )
            .then((res) => {
              resolve(res)
            })
            .catch((err) => {
              reject(err)
            })
        })
        let p2 = new Promise((resolve, reject) => {
          addDBDRW(this.form)
            .then((res) => {
              resolve(res)
            })
            .catch((err) => {
              reject(err)
            })
        })
        Promise.all([p1, p2])
          .then((res) => {
            that.$message({
              message: '创建任务成功',
              type: 'success',
            })
          })
          .catch((err) => {
            console.log(err)
            that.$message({
              message: '创建失败',
              type: 'error',
            })
          })
        that.dialogFormVisibleIN = false
        that.$emit('fetch-data', that.selectRows)
        that.close()
      },
      goBack() {
        this.$parent.addshow = false
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            return false
          }
        })
      },
      selectChange(e) {
        this.selectRows = e
      },
      search() {
        this.getData()
      },
      resetlist() {
        this.listQuery = Object.assign({}, _listQuery)
        this.getData()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.getData()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .search-group {
    display: flex;
    flex-flow: row wrap;

    .search-gropu-item {
      padding: 10px 20px;
      width: calc((100% - 20px * 8) / 2);
      display: flex;

      label {
        width: 0.8rem;
        white-space: nowrap;
        line-height: 0.32rem;
        margin-right: 0.1rem;
      }

      .el-select {
        width: 100%;
      }
    }

    .search-gropu-item-time {
      width: 500px !important;
      padding: 10px 20px;
      display: flex;

      label {
        white-space: nowrap;
        line-height: 32px;
        margin-right: 10px;
      }
    }

    .search-button {
      margin-left: auto;
      padding: 0.1rem 0.2rem;

      .el-button {
        font-size: 0.14rem !important;
      }
    }
  }

  .add-container {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #f6f8f9;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .add-top {
      ::v-deep .el-page-header__title {
        font-size: 16px !important;
      }
    }

    .add-main {
      flex: 1;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      overflow: auto;

      .add-main-top {
        padding: 0.2rem;
        background: #fff;
        border-radius: 0.05rem;

        .add-main-tital {
          font-size: 0.18rem;
          border-left: 0.1rem solid rgb(121, 189, 255);
          padding-left: 0.1rem;

          p {
            margin: 0;
          }
        }

        .search-gropu-item {
          margin-top: 0.2rem;
          width: 90%;
          display: flex;
          // label {
          //   white-space: nowrap;
          //   line-height: 32px;
          //   margin-right: 10px;
          // }
        }

        .el-select {
          width: 100%;
        }
      }

      .add-main-list {
        flex: 1;
        background: #fff;
        box-sizing: border-box;

        .list-button-group {
          display: flex;
          flex-direction: row;
          padding: 15px;

          .button-item {
            padding: 0px 10px;
          }

          .button-item:first-child,
          &:last-child {
            padding: 0px 10px 0 0;
          }
        }
      }

      .el-button {
        font-size: 0.14rem !important;
      }

      ::v-deep {
        .elx-table--header-wrapper {
          background-color: rgb(233, 243, 255);
        }

        .elx-table {
          font-size: 0.14rem !important;
        }

        .elx-body--column {
          height: 0.48rem !important;
          line-height: 0.24rem;
        }

        .elx-header--column {
          background-image: none !important;
          height: 0.48rem !important;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input--inner {
          width: 100% !important;
        }

        .el-form-item--small.el-form-item {
          margin-bottom: 0px;
          margin-top: 18px;
        }
      }

      .submit-button {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }

  // ::v-deep {
  //   .el-dialog--center .el-dialog__body {
  //     min-height: 25vh;
  //   }
  // }
</style>
